---
layout: layouts/page.njk
title: Badge
description: Displays a badge or a component that looks like a badge.
toc:
  - label: Usage
    id: usage
  - label: Examples
    id: examples
    children:
      - label: Primary
        id: example-primary
      - label: Secondary
        id: example-secondary
      - label: Destructive
        id: example-destructive
      - label: Outline
        id: example-outline
      - label: With icon
        id: example-with-icon
      - label: Link
        id: example-link
---

{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}

{% set code %}
<div class="flex flex-col items-center gap-2">
  <div class="flex w-full flex-wrap gap-2">
    <span class="badge">Badge</span>
    <span class="badge-secondary">Secondary</span>
    <span class="badge-destructive">Destructive</span>
    <span class="badge-outline">Outline</span>
  </div>
  <div class="flex w-full flex-wrap gap-2">
    <span class="badge-secondary bg-blue-500 text-white dark:bg-blue-600">
      {% lucide "badge-check" %}
      Verified
    </span>
    <span class="badge rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">8</span>
    <span class="badge-destructive rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">99</span>
    <span class="badge-outline rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">20+</span>
  </div>
</div>
{% endset %}
{{ code_preview("badge", code) }}

<h2 id="usage"><a href="#usage">Usage</a></h2>

<section class="prose">
  <p>Use one of the badge classes: <code>badge</code>, <code>badge-primary</code>, <code>badge-secondary</code>, <code>badge-destructive</code> or <code>badge-outline</code>.
</section>

{{ code_block(code) }}

<h2 id="examples"><a href="#examples">Examples</a></h2>

<h3 id="example-primary"><a href="#example-primary">Primary</a></h3>

{% set code %}<span class="badge">Primary</span>{% endset %}
{{ code_preview("badge-primary", code) }}

<h3 id="example-secondary"><a href="#example-secondary">Secondary</a></h3>

{% set code %}<span class="badge-secondary">Secondary</span>{% endset %}
{{ code_preview("badge-secondary", code) }}

<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>

{% set code %}<span class="badge-destructive">Destructive</span>{% endset %}
{{ code_preview("badge-destructive", code) }}

<h3 id="example-outline"><a href="#example-outline">Outline</a></h3>

{% set code %}<span class="badge-outline">Outline</span>{% endset %}
{{ code_preview("badge-outline", code) }}

<h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>

{% set code %}<span class="badge-destructive">
  {% lucide "circle-alert" %}
  With icon
</span>{% endset %}
{{ code_preview("badge-with-icon", code) }}

<h3 id="example-link"><a href="#example-link">Link</a></h3>

{% set code %}<a href="#" class="badge-outline">
  Link
  {% lucide "arrow-right" %}
</a>{% endset %}
{{ code_preview("badge-link", code) }}
